<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>幻灯片设置</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="css/slide.css"/>
    <style>
        #uniocn {
            box-sizing: border-box;
            padding: 15px 100px;
        }
    </style>
</head>

<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="finance-title" style="background: #fff;">
        <button id="addNew" class="layui-btn">添加幻灯片</button>
    </div>
    <div class="manageb">
        <form class="layui-form">
            <div class="layui-input-inline" style="width: 100px;font-size: 14px;">
                <select name="interest" lay-filter="aihao">
                    <option value="" selected=""></option>
                    <option value="0">首页</option>
                    <option value="1">团购</option>
                </select>
            </div>

            <div class="layui-input-inline">
                <input type="text" name="keyword" placeholder="请输入标题" class="layui-input" style="font-size: 14px;">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">搜索</button>
            </div>
        </form>
    </div>

    <div class="table">
        <table class="layui-hide" id="demo" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delect">删除</a>
        </script>
    </div>

</div>

<!--添加幻灯片-->
<div class="alear_a">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">显示位置</label>
            <div class="layui-input-block">
                <select>
                    <option value=""></option>
                    <option value="0">首页</option>
                    <option value="1">优惠券</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="tel" placeholder="请输入排序" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">幻灯片标题</label>
            <div class="layui-input-block">
                <input type="text" placeholder="请输入幻灯片标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">幻灯片链接</label>
            <div class="layui-input-block">
                <input type="text" placeholder="请输入幻灯片链接" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">幻灯片图片</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" style="width: 120px;" id="demo1">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-block">
                <input type="radio" name="show" value="是" title="是">
                <input type="radio" name="show" value="否" title="否" checked>
            </div>
        </div>
    </form>
</div>
<!--状态-->
<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="lock" value="{{d.id}}" title="开启" lay-filter="lockDemo" {{ d.id==1 ? 'checked' : '' }}>
</script>
</body>

<script src="layui/layui.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/vue2.5.16.js"></script>
<script src="js/public.js"></script>
<script src="js/data.js"></script>
<script>
    new Vue({
        el: "#uniocn",
        data: {
            header: data.header,
            side: data.side,
        }
    })

    layui.use(['element', 'layer', 'table', 'form', 'upload'], function () {
        var element = layui.element,
            layer = layui.layer,
            table = layui.table,
            form = layui.form,
            upload = layui.upload;

        $('#addNew').click(function () {
            layer.open({
                title: '添加幻灯片',
                type: 1,
                area: '600px',
                content: $('.alear_a'),
                btn: ['提交', '取消'],
                btnAlign: 'c',
                yes: function (index, layero) {
                    layer.msg('提交成功', {
                        time: 2000,
                    });
                    layer.close(index);
                }
            });
        })

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: '',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            },

            done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            },

            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        })

        //搜索
        form.on('submit(formDemo)', function (data) {
            console.log(JSON.stringify(data.field));
            return false;
        });

        //
        table.render({
            elem: '#demo',
            cols: [
                [ //标题栏
                    {
                        field: 'picture',
                        title: '图片',
                        align: 'center',
                    },
                    {
                        field: 'order',
                        title: '显示顺序',
                        align: 'center',
                    }, {
                    field: 'title',
                    title: '标题',
                    align: 'center',
                }, {
                    field: 'link',
                    title: '链接',
                    align: 'center',
                }, {
                    field: 'lock',
                    title: '状态',
                    align: 'center',
                    templet: '#checkboxTpl',
                    unresize: true
                }, {
                    field: 'position',
                    title: '位置',
                    align: 'center',
                }, {
                    fixed: 'right',
                    title: '操作',
                    align: 'center',
                    width: 300,
                    toolbar: '#barDemo'
                }
                ]
            ],
            data: [{
                "picture": "<img src='images/bg.png' style='width: 100px;height: 50px;'/>",
                "order": "0",
                "title": "首页banner图",
                "link": "index.html",
                "position": "首页"
            }, {
                "picture": "<img src='images/bg.png' style='width: 100px;height: 50px;'/>",
                "order": "1",
                "title": "首页banner图",
                "link": "index.html",
                "position": "首页"
            }],
            page: true, //是否显示分页
            limit: 10 //每页默认显示的数量
        });

        //监听状态操作
        form.on('checkbox(lockDemo)', function (obj) {
            console.log(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
        })

        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //编辑
                layer.open({
                    title: '编辑幻灯片',
                    type: 1,
                    area: '600px',
                    content: $('.alear_a'),
                    btn: ['提交', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                        layer.msg('提交成功', {
                            time: 2000,
                        });
                        layer.close(index);
                    }
                });
            } else if (obj.event === 'delect') { //删除
                layer.confirm('确认删除吗？', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        })

    })
</script>

</html>